<template>
    <div id="bottomLeft">
        <div class="bg-color-black">
            <div class="d-flex pt-2 pl-2">
                <span style="color: #5cd9e8;">
                    <icon name="chart-bar" />
                </span>
                <div class="d-flex">
                    <span class="fs-xl text mx-2">数据统计图</span>
                </div>
            </div>
            <div>
                <div id="bottomleftcontainer" style="width: 100%; height: 19.825rem;" />
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            options: {
                title: {
                    text: ''
                },
                tooltip: {
                    trigger: 'axis',
                    backgroundColor: 'rgba(255,255,255,0.1)',
                    axisPointer: {
                        type: 'shadow',
                        label: {
                            show: true,
                            backgroundColor: '#7B7DDC'
                        }
                    }
                },
                legend: {
                    data: ['发电率', '发电数', '停电数'],
                    textStyle: {
                        color: '#B4B4B4'
                    },
                    top: '0%'
                },
                grid: {
                    left: '12%',  // 图示整体左移
                    x: '8%', // x轴数字宽度
                    width: '80%', // 图示整体大小
                    y: '8%' // y轴数字宽度
                },
                xAxis: {
                    data: [
                        "6/29",
                        "6/30",
                        "7/1",
                        "7/2",
                        "7/3",
                        "7/4",
                        "7/5",
                        "7/6",
                        "7/7",
                        "7/8",
                        "7/9",
                        "7/10",
                        "7/11",
                        "7/12",
                        "7/13",
                        "7/14",
                        "7/15",
                        "7/16",
                        "7/17",
                        "7/18",
                        "7/19",
                        "7/20",
                        "7/21",
                        "7/22",
                        "7/23",
                        "7/24",
                        "7/25",
                        "7/26",
                        "7/27",
                        "7/28",
                        "7/29",
                        "7/30",
                        "7/31"
                    ],
                    axisLine: {
                        lineStyle: {
                            color: '#B4B4B4'
                        }
                    },
                    axisTick: {
                        show: false
                    }
                },
                yAxis: [
                    {
                        min: 0,
                        max: 100,
                        position: 'left',
                        splitLine: { show: false },
                        axisLine: {
                            lineStyle: {
                                color: '#B4B4B4'
                            }
                        },

                        axisLabel: {
                            formatter: '{value} '
                        }
                    },
                    {
                        min: 0,
                        max: 1,
                        position: 'right',
                        splitLine: { show: false },
                        axisLine: {
                            lineStyle: {
                                color: '#B4B4B4'
                            }
                        },
                        axisLabel: {
                            formatter: '{value} '
                        }
                    }
                ],
                series: [
                    {
                        name: '发电率',
                        type: 'line',
                        smooth: true,
                        showAllSymbol: true,
                        symbol: 'emptyCircle',
                        symbolSize: 8,
                        yAxisIndex: 1,
                        itemStyle: {
                            normal: {
                                color: '#F02FC2'
                            }
                        },
                        data: []
                    },
                    {
                        name: '发电数',
                        type: 'bar',
                        barWidth: 10,
                        itemStyle: {
                            normal: {
                                barBorderRadius: 5,
                                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                    { offset: 0, color: '#956FD4' },
                                    { offset: 1, color: '#3EACE5' }
                                ])
                            }
                        },
                        data: [
                            46, 50, 45, 40, 75, 85, 79, 35, 46, 45, 56, 66, 52, 65, 89, 66, 38,
                            45, 87, 93, 35, 70, 81, 50, 92, 66, 65, 80, 38, 55, 64, 45, 33
                        ]
                    },
                    {
                        name: '停电数',
                        type: 'bar',
                        barGap: '-100%',
                        barWidth: 10,
                        itemStyle: {
                            normal: {
                                barBorderRadius: 5,
                                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                    { offset: 0, color: 'rgba(156,107,211,0.8)' },
                                    { offset: 0.2, color: 'rgba(156,107,211,0.5)' },
                                    { offset: 1, color: 'rgba(156,107,211,0.2)' }
                                ])
                            }
                        },
                        z: -12,
                        data: [
                            80, 72, 45, 48, 88, 97, 86, 44, 48, 50, 61, 67, 59, 67, 92, 72, 45,
                            48, 88, 97, 37, 71, 84, 50, 97, 67, 71, 84, 50, 61, 77, 52, 38
                        ]
                    }
                ]
            }
        }
    },
    mounted() {
        this.setData()
        this.initEchart()
    },
    methods: {
        setData() {
            for (let i = 0; i < this.options.series[1].data.length; i++) {
                let rate = this.options.series[1].data[i] / this.options.series[2].data[i]
                this.options.series[0].data.push(rate.toFixed(2))
            }
        },
        initEchart() {
            var chartDom = document.getElementById('bottomleftcontainer')
            var myChart = this.$echarts.init(chartDom)
            myChart.setOption(this.options)
        }
    }
}
</script>

<style lang="scss">
#bottomLeft {
    padding: 0.3rem 0.2rem;
    height: 20.5rem;
    min-width: 3.75rem;
    border-radius: 0.0625rem;
    .bg-color-black {
        margin-top: 0.5rem;
        margin-left: 0.5rem;
        width: 97%;
        height: 19rem;
        border-radius: 0.125rem;
    }
    .text {
        color: #c3cbde;
    }
}
</style>